use crate::*;
use leptos::leptos_dom::ev::SubmitEvent;
use leptos::logging;
use leptos::*;
use serde::{Deserialize, Serialize};
use serde_json::*;
use tracing::{debug, error, info};
use wasm_bindgen::prelude::*;

#[derive(Default, Debug, serde::Serialize, serde::Deserialize, Clone)]
struct CustomResponse {
    filename: String,
    other_val: usize,
}

#[wasm_bindgen]
extern "C" {
    // invoke without arguments
    #[wasm_bindgen(js_namespace = ["window", "__TAURI__", "core"], js_name = invoke)]
    pub async fn invoke_without_args(cmd: &str) -> JsValue;

    // invoke with arguments (default)
    #[wasm_bindgen(js_namespace = ["window", "__TAURI__", "core"])]
    pub async fn invoke(cmd: &str, args: JsValue) -> JsValue;
}

#[derive(Serialize, Deserialize)]
pub struct GreetArgs<'a> {
    pub name: &'a str,
}

#[component]
pub fn App() -> impl IntoView {
   
    let (router, set_router) = create_signal(0i32);

    view! {   
    <main>
    <nav align="center">
    <a href="#" on:click=move |_| { set_router.set(0);}>"YeePage"<img src="public/tauri.svg" height="30px" /> </a>
    <a href="#" on:click=move |_| { set_router.set(1);}>"MyChart"</a> " | "
    <a href="#" on:click=move |_| { set_router.set(2);}>"Dialog"</a> " | "
    <a href="#" on:click=move |_| { set_router.set(4);}>"ChatGLM"</a> " | "
    <a href="#" on:click=move |_| { set_router.set(5);}>"ChatGLM2"</a> " | "
    <a href="#" on:click=move |_| { set_router.set(6);}>"ChatGLM3"</a> " | "
    <a href="#" on:click=move |_| { set_router.set(8);}>"ChatGLM4"</a> " | "
    <a href="#" on:click=move |_| { set_router.set(7);}>"Search"</a> " | "
    <a href="#" on:click=move |_| { set_router.set(3);}>"Markdown"</a>
    </nav>
      <div>
      {
        move || {
            let rid = router.get();
            match rid {
              1 => {
                  view! { <MyChartPage />  }
                },
              2 => {
                  view! { <DialogPage />    }
              },
              3 => {
                view! { <MarkdownPage />    }
              },
              4 => {
                view! { <GlmChartPage />    }
              },             
              5 => {
                view! { <GlmChartPage2 />    }
              },    
              6 => {
                view! { <GlmChartPage3 />    }
              },                
              7 => {
                view! { <grepsearch::SearchPage />    }
              },  
              8 => {
                view! { <GlmChartPage4 />    }
              },               
              _ => {
                  view! { <YeePage /> }
              },
          }
        }
     }
      </div>
      </main>
    }
}
